<template>
	<view class="topic_publish_layout" v-if="data">
		<uni-section title="题目" type="line"></uni-section>
		<view class="textarea">
			<textarea v-model="data.question_content" placeholder="请输入题目" :maxlength="-1" />
		</view>

		<uni-section title="类型" type="line"></uni-section>
		<uni-data-checkbox :localdata="localdata" class="checkbox" v-model="data.question_type"
			@change="uni_data_checkbox_change"></uni-data-checkbox>


		<uni-section title="难度" type="line"></uni-section>
		<uni-rate :value="data.difficulty" class="uni-rate" size="30" @change="uni_rate_change"></uni-rate>

		<!-- 单选 -->
		<view v-if="data.question_type == 0 || data.question_type == 1">
			<uni-section title="选项" type="line">
				<template #right>
					<view class="options_add" @click="options_click">新增选项 </view>
				</template>
			</uni-section>
			<checkbox-group name="" @change="checkbox_group_change">
				<view v-for="(item,index) in data.options" :key="item._id" class="options_content flex-row">
					<view class="options_letter"> {{numberToLetter(index)}} </view>
					<textarea v-model="item.option_content" placeholder="请输入选项内容" :maxlength="200" auto-height
						class="options_textarea" />
					<label class="options_label">
						<checkbox :value="String(index)" :checked="item.is_correct" class="options_checkbox">
						</checkbox>
						正确答案
					</label>
					<view class="options_delete" @click="options_delete(index)"> 删除 </view>
				</view>
			</checkbox-group>
		</view>

		<!-- 判断题 -->
		<view v-if="data.question_type == 2" class="flex-column">
			<uni-section title="选项" type="line"> </uni-section>
			<radio-group name="" @change="radio_group_change">
				<view class="check_text flex-row">
					<view class="uni-icons_parent centent-parent" style="background-color: lightgreen">
						<uni-icons type="checkmarkempty" size="18" color="white"></uni-icons>
					</view>
					<input type="text" class="flex-1 options_input" placeholder="请输入选项内容"
						v-model="data.options[0].option_content" />
					<label class="options_label">
						<radio value="0" class="radio_scale" :checked="data.options[0].is_correct"></radio>
						正确答案
					</label>
				</view>

				<view class="check_text flex-row">
					<view class="uni-icons_parent centent-parent" style="background-color: indianred">
						<uni-icons type="closeempty" size="20" color="white"></uni-icons>
					</view>
					<input type="text" class="flex-1 options_input" placeholder="请输入选项内容"
						v-model="data.options[1].option_content" />
					<label class="options_label">
						<radio value="1" class="radio_scale" :checked="data.options[1].is_correct"></radio>
						正确答案
					</label>
				</view>
			</radio-group>
		</view>

		<view v-if="data.question_type == 3" style="margin-top: 20rpx;">
			<view class="textarea">
				<textarea v-model="data.answer_fill_blanks" placeholder="请输入答案" :maxlength="-1" />
			</view>
		</view>

		<uni-section title="解析" type="line"> </uni-section>
		<view class="analysis_container">
			<textarea placeholder="请输入本题解析" class="analysis" v-model="data.analysis" maxlength="500"></textarea>
		</view>

		<view @click="onsubmit" class="submit">提交</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		computed,
		ref
	} from 'vue'

	const data = ref(null)
	const questionsObj = uniCloud.importObject('questionsObj')
	const localdata = ref([{
			"text": "单选",
			"value": 0
		},
		{
			"text": "多选",
			"value": 1
		},
		{
			"text": "判断",
			"value": 2
		},
		{
			"text": "填空",
			"value": 3
		}
	])

	const previous = ref(null)
	const single = computed(() => data.value.question_type == 0)
	const multiple = computed(() => data.value.question_type == 1)
	let question_storehouse_id

	onLoad(async (params) => {
		if (params.id) {
			let res = await questionsObj.topic_publish_detail(params.id)
			if (res.errCode != 0) {
				return
			}
			data.value = res.data[0]
		} else {
			question_storehouse_id = params.question_storehouse_id
			reset()
		}
		console.log('题目详情', data.value);
	})
	/* 重置 */
	function reset() {
		data.value = {
			question_storehouse_id: question_storehouse_id,
			question_type: 0,
			difficulty: 1,
			question_content: ''
		}
		previous.value = null
	}
	/* 新增选项 */
	function options_click() {
		if (!data.value.options) {
			data.value.options = []
		}
		data.value.options.push({
			topic_id: data.value._id,
			option_content: ''
		})
	}
	/* 类型选择器 */
	function uni_data_checkbox_change(params) {
		let type = params.detail.data.value
		if (type == 0 || type == 1 && data.value.options) { // 单选
			data.value.options.forEach((item, index) => {
				item.option_content = ['正确', '错误'].includes(item.option_content) ? "" : item.option_content
				item.is_correct = previous.value == index
			})
		} else if (type == 2) { // 判断
			data.value.options = [{
				option_content: '正确'
			}, {
				option_content: '错误'
			}]
		} else if (type == 3) {
			data.value.answer = []
		}
	}
	/* 难度 */
	function uni_rate_change(params) {
		data.value.difficulty = params.value
	}

	/* 删除选项 */
	function options_delete(params) {
		data.value.options.splice(params, 1)
	}

	function numberToLetter(num) {
		return String.fromCharCode(64 + num + 1);
	}

	function checkbox_group_change(params) {
		let value = params.detail.value
		if (single.value && previous.value && value.includes(previous.value)) { // 单选
			value.splice(value.indexOf(previous.value), 1)
		}
		data.value.options.forEach((item, index) => {
			item.is_correct = value.includes(String(index))
		})
		previous.value = value.pop()
	}

	/* 判断题 */
	function radio_group_change(params) {
		let value = params.detail.value
		data.value.options.forEach((item, index) => {
			item.is_correct = value == index
		})
	}

	async function onsubmit() {
		console.log(data.value);
		if (data.value.question_content.length == 0) {
			uni.showToast({
				title: '请添加题目',
				icon: 'none'
			})
			return
		}
		if (data.value.question_type.length == 0) {
			uni.showToast({
				title: '请选择类型',
				icon: 'none'
			})
			return
		}
		if (data.value.question_type != 3 && !data.value.options) {
			uni.showToast({
				title: '请添加选项',
				icon: 'none'
			})
			return
		}
		// 有未填写的选项
		let is_empty = data.value.options?.filter(item => item.option_content.length == 0)
		if (is_empty?.length > 0) {
			let index = data.value.options.indexOf(is_empty[0])
			console.log(is_empty, index);
			uni.showToast({
				title: `选项"${numberToLetter(index)}"的选项内容未填写`,
				icon: 'none'
			})
			return
		}
		// 未选择任何正确答案
		let is_correct = data.value.options?.filter(item => item.is_correct)
		if (data.value.question_type != 3 && is_correct?.length == 0) {
			uni.showToast({
				title: '请选择正确答案',
				icon: 'none'
			})
			return
		}
		// 覆盖选项的option_code
		data.value.options?.forEach((item, index) => {
			item.option_code = numberToLetter(index)
		})
		// 题目中记录正确答案
		data.value.answer = is_correct?.map(item => item.option_code)
		// 发布
		uni.showLoading()
		let res = await questionsObj.topic_publish(data.value)
		uni.hideLoading()
		let success = res.errCode == 0
		uni.showToast({
			title: success ? '发布成功' : res.errMsg,
			icon: success ? 'success' : 'fail'
		})
		if (!success) {
			return
		}
		uni.$emit('topic_publish_success')
		uni.showModal({
			title: '是否继续编辑',
			content: '继续新增试题？',
			confirmText: '新增',
			cancelText: '返回',
			success: (res) => {
				console.log(res);
				if (res.confirm) {
					reset()
				} else {
					uni.navigateBack()
				}
			},
		})
	}
</script>

<style lang="scss" scoped>
	.topic_publish_layout {
		padding-bottom: 40rpx;

		.textarea {
			margin: 0 20rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			background-color: $me-color-background;

			textarea {
				width: 100%;
				font-size: 28rpx;
			}
		}

		.checkbox {
			margin-top: 20rpx;
			padding: 0 20rpx;
		}

		.uni-rate {
			padding: 0 10rpx 0;
		}

		.options_add {
			color: $me-color-blue;
			border: 1rpx solid #3396fb;
			padding: 8rpx 20rpx;
			border-radius: 8rpx;
		}

		.options_content {
			padding: 0 20rpx;
			align-items: center;
			margin-bottom: 20rpx;

			.options_letter {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				color: white;
				background-color: $me-color-blue;
			}

			.options_textarea {
				margin-left: 10rpx;
				height: 88rpx;
				padding: 16rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
				flex: 1;
				background-color: $me-color-background;
			}

			.options_checkbox {
				margin-left: 10rpx;
				transform: scale(0.8);
			}

			.options_delete {
				margin-left: 10rpx;
				color: white;
				padding: 8rpx 20rpx;
				border-radius: 8rpx;
				background-color: $me-color-red-1;
			}
		}

		.options_input {
			background-color: $me-color-background;
			padding: 8rpx 10rpx;
			height: 66rpx;
			border-radius: 8rpx;
		}

		.options_label {
			display: flex;
			align-items: center;
			margin-right: 20rpx;
		}

		.radio_scale {
			transform: scale(0.8);
			margin-left: 10rpx;
		}

		.check_text {
			font-size: 28rpx;
			color: $me-color-gray-2;
			margin-left: 20rpx;
			align-items: center;
			margin-top: 20rpx;

			.uni-icons_parent {
				display: flex;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.analysis_container {
			padding: 0 20rpx;

			.analysis {
				width: 100%;
				padding: 10rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
				background-color: $me-color-background;
			}
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			background-color: $me-color-blue;
			padding: 16rpx 100rpx;
			margin: 50rpx auto 0;
			width: fit-content;
			border-radius: 10rpx;
			font-size: 28rpx;
		}
	}
</style>